<template>
  <div class="rights-container white-bg-page">
    <div class="header">您的{{packages.name}} <span class="color-red">{{tagName}}</span></div>
    <div class="rights-title color-red fz16">会员到期后以下功能将无法使用</div>
    <EquityList :data="packages.cat_list"/>
    <div class="footer-btn">
      <el-button class="btn-w150 btn-h36 has-radius"
        type="success" @click="goPurchase">去看看</el-button>
    </div>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  name: 'MemberExpiredV2',
  mixins: [mixins],
  data () {
    return {
      vipExpired: '',
      tagName: '',
      noReminders: false
    }
  },
  created () {
    this.getPackages()

    const query = this.$route.query
    const vipExpired = query.vip_expired || '0'
    this.vipExpired = vipExpired
    if (vipExpired.indexOf('-') !== -1) {
      const str = vipExpired.replace('-', '')
      this.tagName = `已过期${str}天`
    } else {
      this.tagName = `剩余${vipExpired}天`
    }
    this.$xz('xz_substat_action', 2410)
  },
  methods: {
    onLoadFinish () {
      const h = Math.max(360, this.pkgH + 300)
      this.$xz('xz_set_window_size', 'XZDesktopExpired', 656, h)
      this.$xz('xz_page_load_finished', 'XZDesktopExpired')
    },
    async goPurchase () {
      const obj = {
        '10000': 8001,
        '20000': 8023,
        '40000': 8206
      }
      await this.$xz('xz_substat_action', 2411)
      await this.$xz('xz_set_stat_id', obj[this.pkgid])
      this.$xz('xz_switch_dialog', 'XZMainWindow', true, JSON.stringify({ pkgid: this.packages.pkg_id }))
    },
    onNoReminders () {
      if (this.noReminders) {
        this.$xz('xz_substat_action', 2413)
      }
      this.$xz('xz_set_vip_expired_remind', this.pkgid, this.noReminders)
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-container {
  height: 100%;
  overflow: auto;
  padding: 20px 25px 10px;
}
.header {
  margin-bottom: 10px;
  text-align: center;
}
.footer-btn{
  margin-top: 20px;
  text-align: center;
}
.color-red{
  color: #FC5B42;
  font-weight: bold;
}
.rights-title{
  &::before,
  &::after {
    content: "";
    background: #FC5B42;
  }
}
.no-reminders{
  position: absolute;
  left: 24px;
  bottom: 24px;
}
</style>
